<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hua</title>
<style>
/* 定义页面的高度即樱花飘落范围的高度 */
body {
height: 5000px;
}

.snowRoll {
position: absolute;
opacity: 1;
height: 80px;
animation: mysakura 30s;
}

/* 给樱花容器添加一边飘落一边旋转的动画 */
@keyframes mysakura {
to {
transform: rotate(1080deg);
}
}
</style>
</head>
<body>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script>
// 需求：让樱花从页面上方随机产生并往左下运动并旋转
// 樱花飘落部分
// 设置数组存储不同花瓣的图片，
// 等一下让图片随机定时随机产生一张
// 可以选择自己喜欢的图片 比如雨滴 孔明灯 流星等
let sakuraUrl = [
'img/1.png',
'img/2.png',
'img/3.png',
]
//获取花瓣飘落范围的宽高
visualWidth = $("body").width();
visualHeight = $("body").height();

//飘樱花 函数
function sakuraflake() {
// 创建一个樱花元素
function createSakuraBox() {
// 随机3张图0~3下标随机一张樱花图片
let url = sakuraUrl[[Math.floor(Math.random() * 3)]];
// 函数调用时返回这个樱花元素
return $('<div class="snowbox" />').css({
// 樱花的初始样式
'position': 'absolute',
'width': 50,
'height': 50,
'backgroundSize': 'cover',
'zIndex': 100,
'top': '300px',
'opacity': 1,
'backgroundImage': 'url(' + url + ')'
}).addClass('snowRoll');
}


// 设置定时器开始掉落樱花
setInterval(function () {
// 控制樱花的运动的轨迹
// 1.樱花开始的位置即left的值为随机产生
// 2.樱花结束的位置通过计算开始的位置减去大概的值得到也是随机的
// 3.樱花的运动时间也是通过计算飘落范围的高度大概需要多少秒得到
// 以上数据都是可以根据自己喜欢的运动轨迹自行调整
let startLeft = Math.random() * visualWidth,
endTop = visualHeight,
endLeft = startLeft - 4000 + Math.random() * 500,
duration = visualHeight * 10 + Math.random() * 5000;

// 创建一个樱花
let $sakura = createSakuraBox();

// 设计樱花的起点位置
$sakura.css({
left: startLeft,
});

// 添加樱花元素到页面中
$('body').append($sakura);

// 开始执行动画
// 这里用到transition依赖jq的transit插件可自行下载
$sakura.transition({
top: endTop,
left: endLeft,
}, duration, 'linear', function () {
$(this).remove() //动画结束后删除该元素
});

}, 1000);
}
// 调用樱花飘落函数
sakuraflake()
</script>
</body>
</html>
